<template>
  <view>
    <view class="disFlxJS custom-comp" @click="openPopup">
      <text>
        {{
          cooperationDurationType === CooperationDurationTypeEnum.LongTerm
            ? '长期可合作'
            : cooperationDatetime
        }}
      </text>
      <text class="ant-iconfont fz-12 ml-5">&#xe77e;</text>
    </view>
    <UniPopup
      ref="coopPeriodPopup"
      type="bottom"
      borderRadius="32rpx 32rpx 0 0"
      backgroundColor="#FFF"
      :isMaskClick="false"
      :z-index="999"
      @maskClick="handleMaskClick"
    >
      <view class="popup-content">
        <view class="px-16 pb-8">
          <view class="fz-16 py-12">
            <text>选择可合作期限</text>
          </view>
        </view>
        <view class="redio-list">
          <view
            class="pl-24 pr-16 py-12 disFlxJS"
            @click="handleItemClick(CooperationDurationTypeEnum.LongTerm)"
          >
            <view class="flex-1 ov-1">
              <text>长期可合作</text>
            </view>
            <view>
              <text
                v-if="obj.type === CooperationDurationTypeEnum.LongTerm"
                class="ali-icon fz-20"
                style="color: #2878ff"
              >
                &#xe693;
              </text>
              <text v-else class="ali-icon fz-20" style="color: #969799">&#xe690;</text>
            </view>
          </view>
          <view>
            <view
              class="pl-24 pr-16 py-12 disFlxJS"
              @click="handleItemClick(CooperationDurationTypeEnum.LimitedDate)"
            >
              <view class="flex-1 ov-1">
                <text>期限前可合作</text>
              </view>
              <view>
                <text
                  v-if="obj.type === CooperationDurationTypeEnum.LimitedDate"
                  class="ali-icon fz-20"
                  style="color: #2878ff"
                >
                  &#xe693;
                </text>
                <text v-else class="ali-icon fz-20" style="color: #969799">&#xe690;</text>
              </view>
            </view>
            <view class="pl-32 pr-10">
              <UniFormsItem
                v-if="obj.type === CooperationDurationTypeEnum.LimitedDate"
                label="选择日期"
                required
                labelWidth="100"
                :errorMessage="errorMessage"
              >
                <UniDatetimePicker
                  v-model="obj.value"
                  :type="'date'"
                  :clear-icon="true"
                  :border="false"
                />
              </UniFormsItem>
            </view>
          </view>
        </view>
        <view class="px-16 pt-10">
          <TButton text="确定" type="primary" @click="handleSubmit" />
        </view>
      </view>
    </UniPopup>
  </view>
</template>
<script setup lang="ts">
  import { getCurrentInstance, reactive, ref, watch, type PropType } from 'vue';
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import UniDatetimePicker from '@/components/Form/uni_modules/uni-datetime-picker/uni-datetime-picker.vue';
  import UniFormsItem from '@/components/Form/uni_modules/uni-forms-item/uni-forms-item.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { dateUtil } from '@/utils/dateUtil';
  import { CooperationDurationTypeEnum } from '@/enums/businessOpportunitiesEnum';
  const _this = getCurrentInstance();

  const props = defineProps({
    cooperationDatetime: {
      type: String,
      default: '',
    },
    cooperationDurationType: {
      type: Number as PropType<CooperationDurationTypeEnum>,
      default: CooperationDurationTypeEnum.LongTerm,
    },
  });

  const emits = defineEmits(['update:cooperationDatetime', 'update:cooperationDurationType']);

  const obj = reactive({
    type: CooperationDurationTypeEnum.LongTerm,
    value: '',
  });

  const handleItemClick = (type: number) => {
    obj.type = type;
    if (type === CooperationDurationTypeEnum.LimitedDate && !obj.value) {
      obj.value = dateUtil().add(30, 'day').format('YYYY-MM-DD');
    }
  };

  const openPopup = () => {
    obj.type = props.cooperationDurationType;
    obj.value = props.cooperationDatetime;
    (_this?.refs['coopPeriodPopup'] as any).open();
  };

  function handleClose() {
    (_this?.refs['coopPeriodPopup'] as any).close();
  }

  const errorMessage = ref('');
  const handleSubmit = () => {
    if (obj.type === CooperationDurationTypeEnum.LimitedDate && !obj.value) {
      errorMessage.value = '请选择合作期限';
      return;
    }
    errorMessage.value = '';
    emits('update:cooperationDatetime', obj.value);
    emits('update:cooperationDurationType', obj.type);
    handleClose();
  };
  const handleMaskClick = () => {
    handleClose();
  };
</script>
<style lang="scss" scoped>
  .custom-comp {
    min-height: 72rpx;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    color: #999996;
  }
</style>
